import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

// // 导入组件
// import MyLogin from '@/views/MyLogin'
// import Layout from '@/views/Layout'
// import MyHome from '@/views/MyHome'
// import MyAsk from '@/views/MyAsk'
// import MyVideo from '@/views/MyVideo'
// import MyMine from '@/views/MyMine'
// import MineEdit from '@/views/MyMine/MineEdit'
// import MyArticle from '@/views/MyArticle'
// import MySearch from '@/views/MySearch'
// import MyResult from '@/views/MySearch/MyResult'
// import MineChat from '@/views/MyMine/MineChat'

// 导入组件---懒加载形式
const MyLogin = () => import('@/views/MyLogin')
const Layout = () => import('@/views/Layout')
const MyHome = () => import('@/views/MyHome')
const MyAsk = () => import('@/views/MyAsk')
const MyVideo = () => import('@/views/MyVideo')
const MyMine = () => import('@/views/MyMine')
const MineEdit = () => import('@/views/MyMine/MineEdit')
const MyArticle = () => import('@/views/MyArticle')
const MySearch = () => import('@/views/MySearch')
const MyResult = () => import('@/views/MySearch/MyResult')
const MineChat = () => import('@/views/MyMine/MineChat')

const routes = [
  // 路由重定向
  { path: '/', redirect: '/layout/home' },
  { name: 'login', path: '/login', component: MyLogin },
  {
    name: 'edit',
    path: '/mine/edit',
    component: MineEdit,
    meta: {
      needLogin: true
    }
  },
  {
    // h5里有个标签叫 article，这里的命名不能跟原生标签名一样
    name: 'MyArticle',
    path: '/article',
    component: MyArticle,
  },
  {
    name: 'search',
    path: '/search',
    component: MySearch,
    meta: {
      needKeep: true
    }
  },
  {
    name: 'result',
    path: '/search/result',
    component: MyResult,
  },
  {
    name: 'chat',
    path: '/mine/chat',
    component: MineChat,
  },

  {
    name: 'layout',
    path: '/layout',
    component: Layout,
    children: [
      {
        name: 'home',
        path: 'home',
        component: MyHome,
        meta: {
          needKeep: true
        }
      },
      { name: 'ask', path: 'ask', component: MyAsk },
      { name: 'video', path: 'video', component: MyVideo },
      {
        name: 'mine',
        path: 'mine',
        component: MyMine,
        meta: {
          needLogin: true
        }
      },
    ]
  },
]

const router = new VueRouter({
  routes
})

// 全局前置守卫
// 全局：所有路由跳转都会触发
// 前置：就是进入路由之前触发
/*
  to：   去哪,    里面要去的路由的信息,包含了路由的名字、路径、标记
  from： 从哪来， 里面有从哪来的路由的信息
  next： 是一个函数，调用这个函数就代表放行，不调用就不放行
        三种状态：
          next() 直接放行
          next('路径') 放行到指定路径
          next(false) 留在原地
*/
import store from '@/store'
import { Toast } from 'vant';
router.beforeEach((to, from, next) => {

  // 判断要去的页面是不是需要登录的页面
  if (to.meta.needLogin) {
    // 需要登录的页面
    // 判断有没有登录就是判断有没有token
    if (store.state.tokenObj.token) {
      // 有token那就放行
      next()
    } else {
      // 弹出提示
      Toast('请先登录')
      // 没有token，放行到登录页,携带参数保留我原本想去的页面的路径
      // next可以像$router.push的用法一样，也可以传一个对象
      next({
        name: 'login',
        query: {
          back: to.path
        }
      })
    }

  } else {
    // 不需要登录的页面直接放行
    next()
  }
})


// 解决3.1版本后在控制台出现的警告
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location, onResolve, onReject) {
  if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject)
  return originalPush.call(this, location).catch(err => err)
}

export default router
